<!-- <template>
  <div style="height: calc(100vh - 80px);">
    <div id="map-container" style="width: 100%; height: 640px;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    //开始初始地图
    const map = new BMap.Map("map-container");
    // 设置中心点和缩放级别
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    // 添加控件，如缩放控件
    map.addControl(new BMap.NavigationControl());
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    // 定位当前位置
    const geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      console.log(r);

      if (this.getStatus() == 0) {
        const point = new BMap.Point(r.point.lng, r.point.lat);
        const marker = new BMap.Marker(point);
        map.addOverlay(marker);
        // 显示当前位置
        map.panTo(point);
      }
    });

  },
};
</script>

<style scoped></style>
-->




<template>
  <div class="map-wrapper">
    <div id="map-container" ref="mapContainer"></div>

    <!-- 简单的加载/错误提示 -->
    <div v-if="loading" class="mask">地图加载中…</div>
    <div v-if="error" class="mask error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  name: 'BMapOptimized',
  data() {
    return {
      map: null,           // 地图实例
      loading: true,       // 脚本加载状态
      error: null,         // 错误信息
      ak: 'FvibPOTtrtCn6z91J0SNPHBQe8NdfICU' // 自己的 AK
    }
  },
  async mounted() {
    try {
      await this.loadBMapGL()
      this.initMap()
      await this.locateAndMark()
    } catch (e) {
      this.error = e.message || '地图初始化失败'
    } finally {
      this.loading = false
    }
  },
  beforeDestroy() {
    // 销毁地图，释放内存
    this.map && this.map.destroy && this.map.destroy()
  },
  methods: {
    /* 1. 动态加载百度 WebGL 版 API */
    loadBMapGL() {
      return new Promise((resolve, reject) => {
        if (window.BMapGL) {
          resolve()
          return
        }
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?type=webgl&v=1.0&ak=${this.ak}`
        script.onload = () => resolve()
        script.onerror = () => reject(new Error('BMapGL 脚本加载失败'))
        document.head.appendChild(script)
      })
    },

    /* 2. 初始化地图 */
    initMap() {
      this.map = new BMapGL.Map(this.$refs.mapContainer)
      this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11)
      this.map.addControl(new BMapGL.NavigationControl3D())
      this.map.enableScrollWheelZoom(true)
    },

    /* 3. 定位并在当前位置打标记 */
    locateAndMark() {
      return new Promise((resolve, reject) => {
        const geo = new BMapGL.Geolocation()
        geo.getCurrentPosition(r => {
          console.log(r);

          if (geo.getStatus() === 0 && r.point) {
            const point = new BMapGL.Point(r.point.lng, r.point.lat)
            const marker = new BMapGL.Marker(point)
            this.map.addOverlay(marker)
            this.map.panTo(point)
            resolve()
          } else {
            reject(new Error('定位失败，请检查权限或网络'))
          }
        }, { enableHighAccuracy: true })
      })
    }
  }
}
</script>

<style scoped>
.map-wrapper {
  position: relative;
  font-family: '微软雅黑';
  width: 100%;
  height: 500px;
}

#map-container {
  width: 100%;
  height: 500px;
}

.mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 4px;
}

.mask.error {
  background: rgba(255, 0, 0, 0.6);
}
</style>